<template>
    <view class="footer-view" :style="{ height: listHeight + 'rpx' }">
        <eui-card title="基本信息" showTitleLine="true" h-padding="20" type="upDownSingle">
            <template v-slot:content>
                <view class="m-main-top">
                    <eui-text v-model="mainData.c_no" title="供应商" type="titlename" :name="mainData.c_name" occupy />
                    <eui-text :value="getDictName('供应商层级', mainData.c_level)" title="层级" type="name" />
                    <eui-text :value="getDictName('供应商状态', mainData.c_pstatus)" title="状态" type="name" />
                    <eui-text :value="getDictName('经营方式', mainData.c_con_type)" type="name" title="经营方式" />
                    <eui-text :value="getDictName('采购类型', mainData.c_purchase_type)" title="采购类型" type="name" />
                    <eui-text :value="getDictName('供应商采购模式', mainData.c_purchase_mode)" title="采购模式" type="name" />
                    <eui-text :value="getDictName('供应商采购层级', mainData.c_purchase_level)" title="采购层级" type="name" />
                    <eui-text :value="getRelatedName('rdsRegions', mainData.c_purchase_area)" title="采购区域"
                        type="name" />
                    <eui-text :value="mainData.c_tax_rate" type="name" title="进项税率(%)" />
                    <eui-text :value="mainData.c_tax_regno" title="税号" type="name" occupy />
                    <eui-text :value="getDictName('供应商结算模式', mainData.c_settle_mode)" title="结算模式" type="name" />
                    <!-- <eui-text :value="getDictName('供应商采购模式', mainData.c_settle_area)" title="结算分区" type="name" /> -->
                    <eui-text :value="getDictName('进项税来源', mainData.c_tax_src)" title="进项税来源" type="name" />
                    <eui-text :value="mainData.c_mk_userno" type="titlename" title="录入"
                        :name="getRelatedName('rdsUsers', mainData.c_mk_userno)" />
                    <eui-text :value="mainData.c_mk_dt" type="rdstime" />
                </view>
            </template>
        </eui-card>
        <view class="paging-view">
            <eui-paging ref="paging" v-model="listManager" :fixed="false" :refresher-enabled="false"
                :default-page-size="20" :loading-more-enabled="true" :show-loading-more-when-reload="true">
                <view v-for="(item, index) in listManager" class="m-list-top">
                    <eui-text :value="'[' + item.c_store_id + ']' + item.c_store_name" type="name"
                        :title="index + 1 + '.机构'" occupy />
                    <eui-text :value="getDictName('合同单据操作类型', item.c_edit_type)" title="操作类型" type="name" />
                    <eui-text :value="getDictName('订货方法', item.c_order_method)" title="订货方法" type="name" />
                    <eui-text :value="item.c_order_tele" type="name" title="订货电话" />
                    <eui-text :value="item.c_buy_weeks" type="number" title="订货周期(天)" />
                    <eui-text :value="item.c_cancel_day" type="name" title="订货有效期" />
                    <eui-text :value="item.c_delivery_day" type="number" title="送货期(天)" />
                    <eui-text :value="item.c_deliver_time" type="name" title="期望送货时间" />
                    <eui-text :value="getDictName('物流模式', item.c_d_type)" title="物流模式" type="name" />
                    <eui-text :value="getDictName('越库类型', item.c_s_mode)" title="越库类型" type="name" />
                </view>
            </eui-paging>
        </view>
    </view>
</template>

<script setup type="ts">
import service from '@/common/service';
import { getRelatedName, getUserDictName } from '../RdsViews/components/RelatedName.js';
import { getRdsUrl, rdsRequest } from '@/hooks/rdsServices';
import { mapState, mapMutations } from 'vuex'
import { onMounted, ref } from "vue";
const rdsUrl = getRdsUrl();
const listHeight = ref(300);
const mainData = ref({});
const listManager = ref([]);
const detailData = ref([]);
const paging = ref(null);
const conTypeRange = ref([]);
const rdsDict = ref([]);
const props = defineProps({
    data: {
        type: Object
    },
    windowWidth: {
        type: Number,
        default: 0,
    }
});
onMounted(async () => {
    await getListHeight();
    await getAllDicData();
    if (props.data.BillId) {
        await billQuery(props.data.BillId);
    }
})

// 获取列表高度
const getListHeight = async () => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数
            let info = uni.createSelectorQuery().select(".footer-view");
            info.boundingClientRect(function (data) { //data - 各种参数
                //获取列表高度
                let height = res.windowHeight - (data?.top  || 0);
                //转换rpx
                listHeight.value = height / (res.windowWidth / 750) - 100;
            }).exec()
        }
    });
};
// 获取字典数据
const getAllDicData = async () => {
    rdsDict.value = await service.getLocalStorage('rdsDict');
}
const getDictName = (key, value) => {
    const dictMap = rdsDict.value.find(x => x.c_class_name === key && x.c_id === value);
    return dictMap ? dictMap.c_name : '';
}

// 获取预约单据详情信息
const billQuery = async (billId) => {
    if (!billId) {
        paging.value.setLocalPaging([]);
        return;
    }
    const result = await rdsRequest(rdsUrl.bcApi, '供应商引入与变更单', 'EnjoyBillQuery', { BillId: billId }, '0D1');
    if (result.ds.length > 0) {
        mainData.value = result.ds[0];
        detailData.value = result.ds2;
        await reverseConTypeValue(mainData.value);
        if (mainData.value['c_oper_type'] === 'U') {
            await reverseConTypeValue(result.ds4[0]);
        }
        paging.value.setLocalPaging(result.ds2);
    }
}
const reverseConTypeValue = async (row) => {
    row.c_con_type = ['c_is_sell', 'c_is_proxy_sell', 'c_is_proxy_drsell', 'c_is_pool', 'c_is_rent'].filter(a =>
        row[a] === '1').join(',');
    row.c_con_type = row.c_con_type.replace('c_is_sell', '1');
    row.c_con_type = row.c_con_type.replace('c_is_proxy_sell', '2');
    row.c_con_type = row.c_con_type.replace('c_is_proxy_drsell', '3');
    row.c_con_type = row.c_con_type.replace('c_is_pool', '4');
    row.c_con_type = row.c_con_type.replace('c_is_rent', '5');
}
</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '@/main.scss';

.footer-view {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.paging-view {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: $uni-bg-color-inverse;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
}

.m-main-top {
    display: grid;
    grid-template-columns: 51% 49%;
}

.m-list-top {
    display: grid;
    grid-template-columns: 51% 49%;
    border-bottom: 1rpx solid $uni-border-color;
}

.image-min {
    width: 100%;
    height: 150rpx;
    opacity: 0.6;
    margin-top: -20rpx;
}

.no-data-text {
    text-align: center;
    color: #cccccc;
    font-size: 26rpx;
    margin-top: -20rpx;
}
</style>
